<template>
	<view>
		<view class="flex-col page">
		  <view class="flex-row items-center section_3">
		    <view class="flex-row items-center flex-1 section_4">
		      <image
		        class="image_4"
		        src="https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=51de3f01cc13623e9020919a96d8d556.png"
		      />
		      <text class="font text_2 ml-8-5">请输入关键词搜索</text>
		    </view>
		    <view class="flex-col justify-start items-center shrink-0 text-wrapper ml-15">
		      <text class="font_2 text_3">搜索</text>
		    </view>
		  </view>
		  <view class="flex-row section_5">
		    <view class="flex-row items-center">
		      <text class="font">店铺销量</text>
		      <image
		        class="shrink-0 image_5 ml-1-5"
		        src="https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=5f38a54ca793433e4b7f2b7d8fe921ba.png"
		      />
		    </view>
		    <view class="flex-row items-center ml-62">
		      <text class="font">销量</text>
		      <image
		        class="shrink-0 image_5 ml-1-5"
		        src="https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=5f38a54ca793433e4b7f2b7d8fe921ba.png"
		      />
		    </view>
		  </view>
		  <view style="display: flex;flex-wrap: wrap;margin-left:5rpx;" >
		   <view class="flex-col grid-item" style="width: 337rpx;height: 535rpx;margin-left: 20rpx;" v-for="(item,i) in items" @click="toDetails(item)" :key="i"> 
		     <view class="flex-col justify-start items-center self-stretch image-wrapper_4">
		       <image
		         class="image_11"
		         :src="item.photoUrlId"
		       />
		     </view>
		     <text class="self-start font_3 text_4">{{item.productName}}</text>
		     <view class="flex-row justify-between items-center self-stretch group">
		       <view class="group_4">
		         <text class="font_5">¥</text>
		         <text class="font_4">{{item.productPrice}}</text>
		       </view>
		       <text class="font_2">库存{{item.inventory}}</text>
		     </view>
		     <view class="flex-col justify-start items-start self-stretch section_6">
		       <text class="font_7 text_6">{{item.shopName}}</text>
		     </view>
		   </view>
		   
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				height: 0,
				items: [],
				sheShow:0
			}
		},
		onShow() {
			this.sheShow = uni.getStorageSync("sheShow");
		},
		onLoad() {
			this.cread()
		},
		methods: {
			async cread() {
				let res = await this.$request('mall/product/list')
				this.items = res.data
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/shop/shopList/shopList?id=' + item.id+'&shopId='+item.shopId
				})
			},
			openShow() {
				uni.navigateTo({
					url: '/subPackages/shop/shop'
				})
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>
<style scoped>
	.ml-8-5 {
	  margin-left: 17rpx;
	}
	.ml-15 {
	  margin-left: 30rpx;
	}
	.ml-1-5 {
	  margin-left: 3rpx;
	}
	.page {
	  background-color: #f8fbff;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.section_3 {
	  padding: 10rpx 30rpx;
	  background-color: #ffffff;
	}
	.section_4 {
	  padding: 17rpx 28rpx;
	  background-color: #f8f8f8;
	  border-radius: 16rpx;
	  height: 68rpx;
	}
	.image_4 {
	  width: 34rpx;
	  height: 34rpx;
	}
	.font {
	  font-size: 28rpx;
	  font-family: PingFangSC;
	  line-height: 26rpx;
	  color: #333333;
	}
	.text_2 {
	  color: #999999;
	}
	.text-wrapper {
	  padding: 20rpx 0 21rpx;
	  background-color: #1295ff;
	  border-radius: 16rpx;
	  width: 100rpx;
	  height: 64rpx;
	}
	.font_2 {
	  font-size: 24rpx;
	  font-family: PingFangSC;
	  line-height: 23rpx;
	  color: #afafaf;
	}
	.text_3 {
	  color: #ffffff;
	  font-weight: 500;
	}
	.section_5 {
	  padding: 29rpx 41rpx 32rpx;
	  background-color: #ffffff;
	}
	.image_6 {
	  width: 14rpx;
	  height: 11rpx;
	}
	.image_5 {
	  width: 14rpx;
	  height: 24rpx;
	}
	.grid {
	  margin-top: 20rpx;
	  padding: 15rpx 30rpx 0;
	  height: 535rpx;
	  display: grid;
	  grid-template-rows: repeat(3, minmax(0, 1fr));
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  row-gap: 16rpx;
	  column-gap: 16rpx;
	}
	.grid-item {
	  padding-bottom: 20rpx;
	  background-color: #ffffff;
	  border-radius: 12rpx;
	}
	.image-wrapper_4 {
	  padding: 86rpx 0 76rpx;
	  background-image: url('https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=0b9a45de5dd57652676d1d2a1c8cd47d.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.image_11 {
	  width: 283rpx;
	  height: 176rpx;
	}
	.font_3 {
	  font-size: 28rpx;
	  font-family: PingFangSC;
	  line-height: 20rpx;
	  font-weight: 500;
	  color: #333333;
	}
	.text_4 {
	  margin-left: 16rpx;
	  margin-top: 23rpx;
	}
	.group {
	  margin-top: 32rpx;
	  padding-left: 15rpx;
	  padding-right: 14rpx;
	}
	.group_4 {
	  line-height: 23rpx;
	  height: 23rpx;
	}
	.font_5 {
	  font-size: 20rpx;
	  font-family: PingFangSC;
	  line-height: 15rpx;
	  color: #ff6300;
	}
	.font_4 {
	  font-size: 30rpx;
	  font-family: PingFangSC;
	  line-height: 23rpx;
	  font-weight: 500;
	  color: #ff6300;
	}
	.section_6 {
	  margin: 17rpx 15rpx 0;
	  padding: 11rpx 0 12rpx;
	  background-color: #f8f8f8;
	  border-radius: 12rpx;
	}
	.font_7 {
	  font-size: 22rpx;
	  font-family: PingFangSC;
	  line-height: 21rpx;
	  color: #999999;
	}
	.text_6 {
	  margin-left: 13rpx;
	}
	.image-wrapper_5 {
	  padding: 55rpx 0 33rpx;
	  background-image: url('https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=0b9a45de5dd57652676d1d2a1c8cd47d.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.image_10 {
	  width: 266rpx;
	  height: 250rpx;
	}
</style>